<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">


<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" />
<!-- If you use the default popups, use this. -->
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />


<script src="https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>


<body>
    <div id="calendar" style="height: 500px"></div>
    <script>
        /* var calendar = new tui.Calendar('#calendar', {
            usageStatistics: false,
            defaultView: 'month',
            taskView: true,
            useCreationPopup: true,
            useDetailPopup: true,
            template: {
            monthDayname: function(dayname) {
                return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
                }
            }
        }); */
        /* calendar.createSchedules([
            {
                id: '1',
                calendarId: '1',
                title: 'my schedule',
                body: 'body',
                category: 'time',
                dueDateClass: '',
                start: new Date('2021-05-19T09:00:00'),
                end: new Date('2021-05-19T11:00:00'),
                isReadOnly: true    // schedule is read-only
            },
            {
                id: '2',
                calendarId: '1',
                title: 'second schedule',
                body: 'body',
                category: 'time',
                dueDateClass: '',
                start: new Date('2021-05-20T13:00:00'),
                end: new Date('2021-05-20T14:00:00'),
                isReadOnly: true    // schedule is read-only
            }
        ]) */
        var calendar = new tui.Calendar('#calendar', {
            // 'day', 'week', 'month'
            defaultView: 'week',
            // shows the milestone and task in weekly, daily view
            taskView: true,
            // shows the all day and time grid in weekly, daily view
            scheduleView: true,
            // override default styles here
            theme: {
            'common.border': '1px solid #e5e5e5',
            'common.backgroundColor': 'white',
            'common.holiday.color': '#ff4040',
            'common.saturday.color': '#333',
            'common.dayname.color': '#333',
            'common.today.color': '#333',
            // creation guide style
            'common.creationGuide.backgroundColor': 'rgba(81, 92, 230, 0.05)',
            'common.creationGuide.border': '1px solid #515ce6',
            // month header 'dayname'
            'month.dayname.height': '31px',
            'month.dayname.borderLeft': '1px solid #e5e5e5',
            'month.dayname.paddingLeft': '10px',
            'month.dayname.paddingRight': '10px',
            'month.dayname.backgroundColor': 'inherit',
            'month.dayname.fontSize': '12px',
            'month.dayname.fontWeight': 'normal',
            'month.dayname.textAlign': 'left',
            // month day grid cell 'day'
            'month.holidayExceptThisMonth.color': 'rgba(255, 64, 64, 0.4)',
            'month.dayExceptThisMonth.color': 'rgba(51, 51, 51, 0.4)',
            'month.weekend.backgroundColor': 'inherit',
            'month.day.fontSize': '14px',

            // month schedule style
            'month.schedule.borderRadius': '2px',
            'month.schedule.height': '24px',
            'month.schedule.marginTop': '2px',
            'month.schedule.marginLeft': '8px',
            'month.schedule.marginRight': '8px',

            // month more view
            'month.moreView.border': '1px solid #d5d5d5',
            'month.moreView.boxShadow': '0 2px 6px 0 rgba(0, 0, 0, 0.1)',
            'month.moreView.backgroundColor': 'white',
            'month.moreView.paddingBottom': '17px',
            'month.moreViewTitle.height': '44px',
            'month.moreViewTitle.marginBottom': '12px',
            'month.moreViewTitle.backgroundColor': 'inherit',
            'month.moreViewTitle.borderBottom': 'none',
            'month.moreViewTitle.padding': '12px 17px 0 17px',
            'month.moreViewList.padding': '0 17px',

            // week header 'dayname'
            'week.dayname.height': '42px',
            'week.dayname.borderTop': '1px solid #e5e5e5',
            'week.dayname.borderBottom': '1px solid #e5e5e5',
            'week.dayname.borderLeft': 'inherit',
            'week.dayname.paddingLeft': '0',
            'week.dayname.backgroundColor': 'inherit',
            'week.dayname.textAlign': 'left',
            'week.today.color': '#333',
            'week.pastDay.color': '#bbb',

            // week vertical panel 'vpanel'
            'week.vpanelSplitter.border': '1px solid #e5e5e5',
            'week.vpanelSplitter.height': '3px',

            // week daygrid 'daygrid'
            'week.daygrid.borderRight': '1px solid #e5e5e5',
            'week.daygrid.backgroundColor': 'inherit',

            'week.daygridLeft.width': '72px',
            'week.daygridLeft.backgroundColor': 'inherit',
            'week.daygridLeft.paddingRight': '8px',
            'week.daygridLeft.borderRight': '1px solid #e5e5e5',

            'week.today.backgroundColor': 'rgba(81, 92, 230, 0.05)',
            'week.weekend.backgroundColor': 'inherit',

            // week timegrid 'timegrid'
            'week.timegridLeft.width': '72px',
            'week.timegridLeft.backgroundColor': 'inherit',
            'week.timegridLeft.borderRight': '1px solid #e5e5e5',
            'week.timegridLeft.fontSize': '11px',
            'week.timegridLeftTimezoneLabel.height': '40px',
            'week.timegridLeftAdditionalTimezone.backgroundColor': 'white',

            'week.timegridOneHour.height': '52px',
            'week.timegridHalfHour.height': '26px',
            'week.timegridHalfHour.borderBottom': 'none',
            'week.timegridHorizontalLine.borderBottom': '1px solid #e5e5e5',

            'week.timegrid.paddingRight': '8px',
            'week.timegrid.borderRight': '1px solid #e5e5e5',
            'week.timegridSchedule.borderRadius': '2px',
            'week.timegridSchedule.paddingLeft': '2px',

            'week.currentTime.color': '#515ce6',
            'week.currentTime.fontSize': '11px',
            'week.currentTime.fontWeight': 'normal',

            'week.pastTime.color': '#bbb',
            'week.pastTime.fontWeight': 'normal',

            'week.futureTime.color': '#333',
            'week.futureTime.fontWeight': 'normal',

            'week.currentTimeLinePast.border': '1px dashed #515ce6',
            'week.currentTimeLineBullet.backgroundColor': '#515ce6',
            'week.currentTimeLineToday.border': '1px solid #515ce6',
            'week.currentTimeLineFuture.border': 'none',

            // week creation guide style
            'week.creationGuide.color': '#515ce6',
            'week.creationGuide.fontSize': '11px',
            'week.creationGuide.fontWeight': 'bold',

            // week daygrid schedule style
            'week.dayGridSchedule.borderRadius': '2px',
            'week.dayGridSchedule.height': '24px',
            'week.dayGridSchedule.marginTop': '2px',
            'week.dayGridSchedule.marginLeft': '8px',
            'week.dayGridSchedule.marginRight': '8px'
            },
            // template options
            template: {
            milestone: function(schedule) {
                return '&lt;span style="color:red;"&gt;&lt;i class="fa fa-flag"&gt;&lt;/i&gt; ' + schedule.title + '&lt;/span&gt;';
            },
            milestoneTitle: function() {
                return 'Milestone';
            },
            task: function(schedule) {
                return '&amp;nbsp;&amp;nbsp;#' + schedule.title;
            },
            taskTitle: function() {
                return '&lt;label&gt;&lt;input type="checkbox" /&gt;Task&lt;/label&gt;';
            },
            allday: function(schedule) {
                return schedule.title + ' &lt;i class="fa fa-refresh"&gt;&lt;/i&gt;';
            },
            alldayTitle: function() {
                return 'All Day';
            },
            time: function(schedule) {
                return schedule.title + ' &lt;i class="fa fa-refresh"&gt;&lt;/i&gt;' + schedule.start;
            }
            },

            // Options for daily, weekly view
            week: {
            daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            startDayOfWeek: 0,
            narrowWeekend: true,
            workweek: false,
            showTimezoneCollapseButton: false,
            timezonesCollapsed: false,
            hourStart: 0,
            hourEnd: 24,
            },

            // Options for monthly view.
            month: {
            daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            startDayOfWeek: 0,
            narrowWeekend: true,
            visibleWeeksCount: 6,
            isAlways6Week: true,
            workweek: false,
            visibleScheduleCount: 1,
            moreLayerSize: {},
            grid: {}, // grid's header and footer information
            scheduleFilter: null
            },

            // list of Calendars that can be used to add new schedule
            /* e.g.
            [
                {
                id: '1',
                name: 'My Calendar',
                color: '#ffffff',
                bgColor: '#9e5fff',
                dragBgColor: '#9e5fff',
                borderColor: '#9e5fff'
                },
                {
                id: '2',
                name: 'Company',
                color: '#00a9ff',
                bgColor: '#00a9ff',
                dragBgColor: '#00a9ff',
                borderColor: '#00a9ff'
                },
            ]
            */
            calendars: [],

            // whether use default creation popup or not
            useCreationPopup: false,

            // whether use default detail popup or not
            useDetailPopup: false,

            // timezone options
            timezone: {
            zones: [
                {
                timezoneName: 'Asia/Seoul',
                displayLabel: 'GMT+09:00',
                tooltip: 'Seoul'
                },
                {
                timezoneName: 'America/New_York',
                displayLabel: 'GMT-05:00',
                tooltip: 'New York',
                }
            ],
            offsetCalculator: function(timezoneName, timestamp){
                // matches 'getTimezoneOffset()' of Date API
                // e.g. +09:00 => -540, -04:00 => 240
                return moment.tz.zone(timezoneName).utcOffset(timestamp);
            },
            },

            // disable double click
            disableDblClick: false,

            // disble click
            disableClick: false,

            // is readonly?
            isReadOnly: false,

            // enable usage statistics
            usageStatistics: true

            });
        /* calendar.on('beforeCreateSchedule', function(event) {
            var startTime = event.start;
            var endTime = event.end;
            var isAllDay = event.isAllDay;
            var guide = event.guide;
            var triggerEventName = event.triggerEventName;
            var schedule;

            if (triggerEventName === 'click') {
                // open writing simple schedule popup
                schedule = {};
            } else if (triggerEventName === 'dblclick') {
                // open writing detail schedule popup
                schedule = {};
            }

            calendar.createSchedules([schedule]);
        });
        // daily view
        calendar.changeView('day', true);

        // weekly view
        calendar.changeView('week', true);

        // monthly view with 5 weeks or 6 weeks based on the month
        calendar.setOptions({month: {isAlways6Week: false}}, true);
        calendar.changeView('month', true);

        // monthly view(default 6 weeks view)
        calendar.setOptions({month: {visibleWeeksCount: 6}}, true); // or null
        calendar.changeView('month', true);

        // 2 weeks monthly view
        calendar.setOptions({month: {visibleWeeksCount: 2}}, true);
        calendar.changeView('month', true);

        // 3 weeks monthly view
        calendar.setOptions({month: {visibleWeeksCount: 3}}, true);
        calendar.changeView('month', true);

        // narrow weekend
        calendar.setOptions({month: {narrowWeekend: true}}, true);
        calendar.setOptions({week: {narrowWeekend: true}}, true);
        calendar.changeView(calendar.getViewName(), true);

        // change start day of week(from monday)
        calendar.setOptions({week: {startDayOfWeek: 1}}, true);
        calendar.setOptions({month: {startDayOfWeek: 1}}, true);
        calendar.changeView(calendar.getViewName(), true);

        // work week
        calendar.setOptions({week: {workweek: true}}, true);
        calendar.setOptions({month: {workweek: true}}, true);
        calendar.changeView(calendar.getViewName(), true); */
    </script>
</body>